<extend name="Public:index" />
<block name="main-crumb">
 <li class="active">系统/设备增加</li>
</block>
<block name="mycss">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/ztree/css/zTreeStyle/zTreeStyle.css" />
</block>
<block name="main-content">
      <div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index: 1000;background-color: #fff;border: 1px #666 solid;">
    <input  style=" margin-top:5px;width:160px" type="text" onkeyup="AutoMatch(this)" placeholder="输入关键字搜索">
    <ul id="tree" class="ztree"></ul>
    </div>
    <form id="add_form"  name="add_form" action="{:U(\'device_add\')}" method="post" class="definewidth m20">
        <table class="table table-bordered table-hover definewidth m10">
             <tr>
                <td width="10%" class="tableleft">系统/设备名称:</td>
                <td >
                <input type="text" name="data[name]" id="name"  />
                </td>
              </tr>
               <tr>
                <td width="10%" class="tableleft">所属部门:</td>
                <td >
                  <input  type="hidden" id="department_id" name="data[department_id]" value="" />
                  <input id="areaSel" name="areaSel" style="width:210px" type="text" readonly onclick="showMenu(event);"  placeholder="---请选择---" required autocomplete="off" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input type="hidden" name="tijiao" id="tijiao" />
                  <input type="submit"class="btn btn_primary" id="sub" name="sub" value="保存"  />&nbsp;&nbsp;&nbsp;&nbsp;
                  <input type="reset" class="btn btn-success" value="清空" />
                </td>
              </tr>


        </table>
    </form>
</block>
<block name="myscript">
     <script src="__PUBLIC__/web/js/common.js"></script>
      <script type="text/javascript" src="__PUBLIC__/ztree/jquery.ztree.core.js" ></script>
     <script language="JavaScript">

function showMenu(e) {
    e = e || window.event;
    e.stopPropagation();
    var areaObj = $("#areaSel");
    //var areaOffset = $("#areaSel").offset();
    var areaOffset = $("#areaSel").position();
    $("#menuContent").css({left:areaOffset.left + "px", top:areaOffset.top + areaObj.outerHeight() + "px"}).slideDown("fast");
    $(document).on("mousedown", onBodyDown);
}

function hideMenu() {
    $("#menuContent").fadeOut("fast");
    $(document).off("mousedown", onBodyDown);
}

function onBodyDown(event) {
    if (!(event.target.id == "areaSel" ||  event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
        hideMenu();
    }
}

//下拉树搜索框搜索
function AutoMatch(txtObj) {
    if (txtObj.value.length > 0) {
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        var nodeList = treeObj.getNodesByParamFuzzy("name", txtObj.value,null);
        //将找到的nodelist节点更新至Ztree内
        $.fn.zTree.init($("#tree"), setting, nodeList);
    } else {
        $.fn.zTree.init($("#tree"), setting, zNodes);
    }
}

var setting = {
    view: {
        selectedMulti: false
    },
    //async: {
        //enable: true,
        //url:"{:U('getNodes')}",
        //autoParam:["id", "name=n", "level=lv"],
        //otherParam:{"otherParam":"zTreeAsyncTest"},
        //dataFilter: filter
    //},
    data: {
        simpleData: {
            enable:true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: ""
        }
    },
    callback: {
        onClick: onClick,
        //onDblClick: onDblClick
    }
};

function onClick(e, treeId, treeNode) {
    /*var pNode = treeNode.getParentNode();
    var ppNode = pNode.getParentNode();

    $('#areaid').val(ppNode.id);
    $('#areaname').val(ppNode.name);

    $('#substationid').val(pNode.id);
    $('#substationname').val(pNode.name);*/

    $('#department_id').val(treeNode.id);
    $('#areaSel').val(treeNode.name);
    hideMenu();
}

var getData = function() {
    $.get('{:U(\'getDepartment\')}', function(nodes){
        zNodes = nodes;
        $.fn.zTree.init($("#tree"), setting, nodes);
    }, 'json');
}

$(function(){
    getData();
});
</script>
</block>